<template>
    <div>
        <Drawer
            :title="alertTitle"
            v-model="showDrawer"
            :width="720"
            :mask-closable="false"
        >
            <Form :model="formData">
                <Row :gutter="32">
                    <Col span="12">
                        <FormItem label="Name" label-position="top">
                            <Input v-model="formData.name" placeholder="please enter user name" />
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="Url" label-position="top">
                            <Input v-model="formData.url" placeholder="please enter url">
                                <span slot="prepend">http://</span>
                                <span slot="append">.com</span>
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="32">
                    <Col span="12">
                        <FormItem label="Owner" label-position="top">
                            <Select v-model="formData.owner" placeholder="please select an owner">
                                <Option value="jobs">Steven Paul Jobs</Option>
                                <Option value="ive">Sir Jonathan Paul Ive</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="Type" label-position="top">
                            <Select v-model="formData.type" placeholder="please choose the type">
                                <Option value="private">Private</Option>
                                <Option value="public">Public</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="32">
                    <Col span="12">
                        <FormItem label="Approver" label-position="top">
                            <Select v-model="formData.approver" placeholder="please choose the approver">
                                <Option value="jobs">Steven Paul Jobs</Option>
                                <Option value="ive">Sir Jonathan Paul Ive</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="DateTime" label-position="top">
                            <DatePicker v-model="formData.date" type="daterange" placeholder="please select the date" style="display: block" placement="bottom-end"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
                <FormItem label="Description" label-position="top">
                    <Input type="textarea" v-model="formData.desc" :rows="4" placeholder="please enter the description" />
                </FormItem>
            </Form>
            <div class="demo-drawer-footer">
                <Button style="margin-right: 8px" @click="close">取消</Button>
                <Button type="primary" @click="save">保存</Button>
            </div>
        </Drawer>
        <div class="system-role">
		<div>
            <Table :loading="loading" highlight-row ref="currentRowTable" :columns="tableColumns" :data="items">
                <template slot-scope="{row}" slot="action">
                    <Button type="primary" size="small" @click="update(row)">修改</Button>
                    <Button class="ml10" type="primary" ghost size="small" @click="remove(row)">删除</Button>
                </template>
            </Table>
            <Row class="pagination">
                <Col align="right">
                    <Page :current="page" :total="totalNum" show-total @on-change="pageChange" />
                </Col>
            </Row>
        </div>
	</div>
    </div>
	
</template>
<script>
import { roleGet, roleUpdate, roleDelete, roleAdd, rolePageQueryList } from '../../../api/role.js'
export default {
    data() {
        return {
            showDrawer: false,
            formData: {
                name: '',
                url: '',
                owner: '',
                type: '',
                approver: '',
                date: '',
                desc: ''
            },
            editedIndex: -1,
            editedItem: {
                rolename: '',
                status: '',
            },
            defaultItem: {
                rolename: '',
                status: '',
            },

            items: [],
            page: 1,
            pageSize: 10,
            totalNum: 0,
            loading: false,
            tableColumns: [
                    {
                        type: 'selection',
                    },
                    {
                        title: '角色id',
                        key: 'id'
                    },
                    {
                        title: '角色名称',
                        key: 'rolename'
                    },
                    {
                        title: '状态',
                        key: 'status'
                    },
                    {
                        title: '创建时间',
                        key: 'createTime'
                    },
                    {
                        title: '更新时间',
                        key: 'updateTime'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                    },
                ],
        }
    },
    mounted() {
        this.rolePageQueryList()
    },
    computed: {
        alertTitle() {
			return this.editedIndex === -1 ? '新增' : '修改'
		}
    },
    methods: {
        pageChange(page){
            this.page = page;
            this.rolePageQueryList();
            console.log('page>', page)
        },
        update(item) {
            this.editedIndex = item._index;
			this.editedItem = Object.assign({}, item);
            this.showDrawer = true;
        },
        create() {
            this.editedIndex = -1;
            this.editedItem = Object.assign({}, this.defaultItem);
            this.showDrawer = true;
        },
        remove(item,idx){

            //done this.close();
        },
        save() {
            if (this.editedIndex > -1) {
                console.log("update...")
                const { id,status,rolename } = this.editedItem;
                roleUpdate({id,status,rolename}).then(res => {
                    console.log('res-->', res)
                })
                //update
                this.$Modal.success({
                    title: this.alertTitle,
                    content: '内容'
                })
            } else {
                console.log("create...")
                const { status,rolename } = this.editedItem;
                roleAdd({status,rolename}).then(res => {
                    console.log('create res--', res)
                }).catch(err => {
                    this.$Modal.success({
                        title: this.alertTitle,
                        content: '失败'
                    })
                })
                //create
            }
            this.rolePageQueryList();
            this.close()
        },
        close() {
			this.showDrawer = false;
			setTimeout(() => {
				this.editedItem = Object.assign({}, this.defaultItem)
				this.editedIndex = -1
			}, 10)
        },
        
        rolePageQueryList() {
            const { page,pageSize,loading } = this;
            if (loading) return;
            this.loading = true;
            rolePageQueryList({
                page,pageSize,
            }).then(res => {
                this.loading = false;
                console.log('res roles->', res)
                if (res.code === "0") {
                    const { currentPage,isMore,items,pageSize,totalNum,totalPage } = res.data;
                    this.items = items,
                    this.page = currentPage,
                    this.totalNum = totalNum;
                    console.log("this.items->", this.items)
                }
            }).catch(err => {
                this.loading = false;
            })
        }
    },
    watch: {
        showDrawer(after){
            after || this.close();
        }
    },
}
</script>
<style scoped>
.system-role{
    background-color: #fff;
}
</style>